<template>
  <div class="form">
    <el-form ref="formData" :model="formData" label-position="top" :rules="formRules">
      <el-form-item label="图标" prop="pageIcon">
        <upload-img :formData="formData" pathName="pageIcon" @upload-img="uploadImg" />
      </el-form-item>
      <el-form-item label="页面名称" prop="pageName">
        <el-input id="entName" @input="chineseFormat('entName', formData, 'pageCode', 0, formData.pageName)" v-model="formData.pageName" />
      </el-form-item>
      <el-form-item label="页面编码" prop="pageCode">
        <el-input v-model="formData.pageCode" />
      </el-form-item>
      <el-form-item label="说明" prop="pageDesc">
        <el-input v-model="formData.pageDesc" />
      </el-form-item>
      <el-form-item label="所属分组" prop="groupId">
        <el-tree-select
          v-model="formData.groupId"
          :data="groupTree"
          check-strictly
          :render-after-expand="false"
          :props="{ value: 'id', label: 'name', children: 'children' }"
          placeholder="选择所属分组"
        />
      </el-form-item>
      <el-form-item label="表单类型" prop="pageType">
        <el-select v-model="formData.pageType" :disabled="$route.query.type == 'edit'">
          <el-option v-for="(opt, index) in pageTypes" :key="index" :value="opt.value" :label="opt.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="页面模型" prop="pageModelId">
        <el-select v-model="formData.pageModelId" multiple filterable>
          <el-option v-for="(opt, idx) in entityTree" :key="idx" :label="opt.entityDesc + '(' + opt.entityName + ')'" :value="opt.entityId" />
        </el-select>
        <!-- <el-input v-model="formData.pageModelId" /> -->
      </el-form-item>
      <el-form-item label="是否创建菜单" prop="withMenu">
        <el-radio v-model="formData.withMenu" label="N" :disabled="$route.query.type == 'edit'">否</el-radio>
        <el-radio v-model="formData.withMenu" label="Y" :disabled="$route.query.type == 'edit'">是</el-radio>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getAppGroupTreeList } from '@code/api/code/page';
import { getModelEntityTree } from '@uni/api/uni/entity/info';
import { getPinyin } from '@/api/common';
import * as anvil from '@/utils/anvil';
import defaultSettings from '@/settings';
import uploadImg from './uploadImg.vue';

export default {
  components: {
    uploadImg
  },
  props: {
    curStep: {
      type: [String, Number],
      default: ''
    },
    data: {
      type: Object,
      default: () => {}
    },
    dataSourceInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      activeStep: 0,
      iconType: '',
      icons: ['404', 'cascader', 'code', 'tab', 'time', 'tree', 'user', 'shopping', 'table', 'form', 'documentation', 'testHome'],
      // formData: {},
      formRules: {
        pageIcon: [{ required: true, message: '请设置图标', trigger: 'change' }],
        pageName: [{ required: true, message: '页面名称不能为空', trigger: 'blur' }],
        pageCode: [
          { required: true, message: '页面编码不能为空', trigger: 'blur' },
          {
            pattern: /^[a-z|A-Z]([a-z|A-Z|0-9|_-]){0,64}$/,
            message: '页面编码格式不正确,字母开头并且长度小于64的字母数字中下划线组合'
          }
        ],
        groupId: [{ required: true, message: '请选择分组', trigger: 'change' }],
        pageType: [{ required: true, message: '请选择页面类型', trigger: 'change' }],
        withMenu: [{ required: true, message: '请选择是否创建菜单', trigger: 'change' }],
        pageModelId: [{ required: true, message: '请选择页面模型', trigger: 'change' }]
      },
      upload: {
        action: import.meta.env.VITE_APP_BASE_API + (defaultSettings.isCould ? '/system-service' : '') + '/custom/upload',
        // action: process.env.VUE_APP_BASE_API + "/system-service/custom/upload",
        showImgUrl: ''
      },
      fromGroup: [],
      groupTree: [],
      defaultProps: {
        children: 'children',
        label: 'cateName'
      },
      treeDataValue: '',
      curModelingWay: [],
      sheetName: [],
      uploadList: [],
      exclForm: {
        sheetName: []
      },
      datasourceOption: [],
      dataSource: {},
      formData: {},
      entityTree: [],
      pageTypes: [
        {
          label: '填报表单',
          value: 'F'
        },
        // {
        //   label: '查询表单',
        //   value: 'Q'
        // },
        // {
        //   label: '模型表单',
        //   value: 'M'
        // }
      ]
    };
  },
  computed: {},
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.formData = newVal;
        }
      },
      deep: true,
      immediate: true
    },
    formData: {
      handler(newVal) {
        this.$emit('update:data', newVal);
      },
      deep: true
    },
    'formData.pageType'(newVal) {
      this.$emit('pageTypeChange', newVal);
    }
  },
  created() {},
  mounted() {
    // this.initData()
    this.getGroups();
    this.getEntityTreeData();
  },
  methods: {
    initData() {
      if (this.formData) {
        this.formData.groupId = this.$route.query.groupId;
        this.formData.appId = this.$route.query.appId;
      }
    },
    chineseFormat: function (e, t, n, i, o) {
      if (this.formData.seeData != 1) {
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        var a = this,
          s = document.getElementById(e),
          l = null;
        null === s ||
          !o ||
          (l && clearTimeout(l),
          (l = setTimeout(function () {
            getPinyin(o).then(function (res) {
              t.pageCode = res.data;
              anvil.checkIsChinese(res.data);
            });
          }, 500)));
        this.$emit('getcurrentName', o ? o : '未命名表单');
      } else {
        this.$emit('getcurrentName', o ? o : '未命名表单');
      }
    },
    getGroups() {
      getAppGroupTreeList({
        id: this.$route.query.appId
      })
        .then((rsp) => {
          // this.groupTree = (rsp.data && rsp.data[0].children) || [];
          this.groupTree = rsp.data;
        })
        .catch((err) => this.msgError('获取分组异常'));
    },
    uploadImg(data) {
      this.formData.pageIcon = JSON.stringify(data);
    },
    getEntityTreeData() {
      const params = {
        // parentId: 0
      };
      return getModelEntityTree(params).then((res) => {
        this.entityTree = res.data;
      });
    },
    validate(callback) {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          callback(valid)
        }
      })
    },
  }
};
</script>
<style lang="scss" scoped>
.nextStep {
  margin-top: 20px;
  :deep(.el-upload-dragger) {
    width: 570px;
  }
}

.icon-svg {
  // width: 50px;
  // height: 50px;
  display: flex;
  flex-wrap: wrap;
  .card-panel-icon {
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: large;
    box-sizing: border-box;
    margin: 10px;
    padding: 5px;
    &:hover {
      box-shadow: 0 0 10px 2px #c2c2c2;
    }
  }
}
.form {
  min-height: calc(100vh - 170px);
  margin: 10px 220px;
  background-color: #fff;
  padding: 30px 300px;

  .avatar-uploader {
    width: 88px;
    height: 88px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 88px;
    height: 88px;
    line-height: 88px;
    text-align: center;
  }
  .avatar {
    width: 88px;
    height: 88px;
    display: block;
  }
}
</style>
